<template>
	<view>
		<view class="content">
			<uni-forms ref="formRef" :model="form" :rules="rules">
				<!-- 表单内容 -->
				<uni-forms-item class="form-item" name="receiver">
					<text class="label">收货人</text>
					<input
						v-model="form.receiver"
						class="input"
						placeholder="请填写收货人姓名"
						value=""
					/>
				</uni-forms-item>
				<uni-forms-item class="form-item" name="contact">
					<text class="label">手机号码</text>
					<input
						v-model="form.contact"
						class="input"
						placeholder="请填写收货人手机号码"
						value=""
					/>
				</uni-forms-item>
				<uni-forms-item class="form-item" name="fullLocation">
					<text class="label">所在地区</text>
					<picker
						class="picker"
						mode="region"
						:value="form.fullLocation.split(' ')"
						@change="changeRegion"
					>
						<view v-if="form.fullLocation">{{ form.fullLocation }}</view>
						<view v-else class="placeholder">请选择省/市/区(县)</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item class="form-item" name="address">
					<text class="label">详细地址</text>
					<input
						v-model="form.address"
						class="input"
						placeholder="街道、楼牌号等信息"
						value=""
					/>
				</uni-forms-item>
				<uni-forms-item class="form-item">
					<label class="label">设为默认地址</label>
					<switch
						@change="changeSwitch"
						class="switch"
						color="#27ba9b"
						:checked="form.isDefault === 1"
					/>
				</uni-forms-item>
			</uni-forms>
		</view>
		<!-- 提交按钮 -->
		<button class="button" @tap="saveAddress">保存并使用</button>
	</view>
</template>

<script>
import {
	getMemberAddressByIdAPI,
	postMemberAddressAPI,
	putMemberAddressByIdAPI,
} from '@/services/address'
export default {
	data() {
		return {
			form: {
				receiver: '', // 收货人
				contact: '', // 联系方式
				fullLocation: '', // 省市区(前端展示)
				provinceCode: '', // 省份编码(后端参数)
				cityCode: '', // 城市编码(后端参数)
				countyCode: '', // 区/县编码(后端参数)
				address: '', // 详细地址
				isDefault: 0, // 默认地址，1为是，0为否
			},
			// 定义规则
			rules: {
				receiver: {
					rules: [{ required: true, errorMessage: '请输入收货人姓名' }],
				},
				contact: {
					rules: [
						{ required: true, errorMessage: '请输入联系方式' },
						{
							// uni-app有没有遇到什么坑？
							// uni-ui 添加表单正则校验的时候，如果直接写正则表达式，微信会处理错误，需要使用字符串的形式使用正则
							pattern: '^1[3-9]\\d{9}$',
							errorMessage: '请输入联系方式',
						},
					],
				},
				fullLocation: {
					rules: [{ required: true, errorMessage: '请选择所在地区' }],
				},
				address: {
					rules: [{ required: true, errorMessage: '请选择详细地址' }],
				},
			},
		}
	},
	onLoad({ id }) {
		uni.setNavigationBarTitle({
			title: id ? '修改地址' : '新建地址',
		})
		// 获取数据的时候，先判断是否有id
		if (id) this.getAddressDetail(id)
	},
	methods: {
		async getAddressDetail(id) {
			const { result } = await getMemberAddressByIdAPI(id)
			// 获取到详情信息之后，赋值到data里面，数据回显
			this.form = result
		},
		// 切换开关触发的回调函数
		changeSwitch(e) {
			this.form.isDefault = e.detail.value ? 1 : 0
		},
		changeRegion(e) {
			this.form.fullLocation = e.detail.value.join(' ') // 和后端返回的数据保持统一
			const [provinceCode, cityCode, countyCode] = e.detail.code
			// 获取到的编码合并到form对象里面去
			Object.assign(this.form, { provinceCode, cityCode, countyCode })
		},
		async saveAddress() {
			await this.$refs.formRef.validate()
			// 有新增和编辑两种功能，根据是否有id进行区分
			if (this.form.id) {
				await putMemberAddressByIdAPI(this.form.id, this.form)
			} else {
				await postMemberAddressAPI(this.form) // 接口需要的数据全部都在form里面了，直接传递form即可
			}

			uni.showToast({
				title: this.form.id ? '修改成功' : '新增成功',
			})

			setTimeout(() => {
				uni.navigateBack()
			}, 500)
		},
	},
}
</script>

<style lang="scss">
page {
	background-color: #f4f4f4;
}

.content {
	margin: 20rpx 20rpx 0;
	padding: 0 20rpx;
	border-radius: 10rpx;
	background-color: #fff;

	.form-item,
	.uni-forms-item {
		display: flex;
		align-items: center;
		min-height: 96rpx;
		padding: 25rpx 10rpx;
		background-color: #fff;
		font-size: 28rpx;
		border-bottom: 1rpx solid #ddd;
		position: relative;
		margin-bottom: 0;

		// 调整 uni-forms 样式
		.uni-forms-item__content {
			display: flex;
		}

		.uni-forms-item__error {
			margin-left: 200rpx;
		}

		&:last-child {
			border: none;
		}

		.label {
			width: 200rpx;
			color: #333;
		}

		.input {
			flex: 1;
			display: block;
			height: 46rpx;
		}

		.switch {
			position: absolute;
			right: -20rpx;
			transform: scale(0.8);
		}

		.picker {
			flex: 1;
		}

		.placeholder {
			color: #808080;
		}
	}
}

.button {
	height: 80rpx;
	margin: 30rpx 20rpx;
	color: #fff;
	border-radius: 80rpx;
	font-size: 30rpx;
	background-color: #27ba9b;
}
</style>
